<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ msg }}</h1>

      <app></app>
    </div>

    <script src="./js/vue.js"></script>

    <script>
      Vue.component("app", {
        template: `
          <div>
            <h2>我是app</h2>
            <base-input @my-click="fn2"></base-input>
          </div>
        `,
        methods: {
          fn2() {
            alert("fn2");
          },
        },
      });

      Vue.component("base-input", {
        props: ["name"],
        template: `
            <div>
                <button @click="onClick">点我,通知父级组件</button>    
            </div>
        `,
        methods: {
          onClick(event) {
            console.log(event);
            alert("button 点击");

            // 触发 my-click 事件, 第二个参数可以传递参数,这边传的参数,那么绑定这个事件的事件处理函数收到的$event就是它.
            this.$emit("my-click", 1);
            // click focus blur input ...  原生DOM事件
            // my-click
          },
        },
      });

      new Vue({
        el: "#app",

        data: {
          msg: "我是根组件",
        },

        methods: {
          fn1(event) {
            console.log(event);
            alert("fn1");
          },
        },
      });
    </script>
  </body>
</html>
